@import "../global/mixin.less";
// 下面仅仅写了，本主题打算定制修改地方的类名。如果修修改的需求可以改其他地方
#vcomments {
  // 编辑框，两个状态，未回复，在上面，回复别人在别人下面，外层容器不同(省略不写)
  // background: @bg8-five;
  color: #fff;
  .vwrap {
    // 昵称、邮箱、网址的外框
    .vheader {
      .vinput {
        color: #fff;
        letter-spacing: 1px; // 增加文字横向间距
        &::placeholder {
          /* Chrome, Firefox, Opera, Safari 10.1+ */
          color: #eee;
          opacity: 0.4; /* Firefox */
        }
      }
    }
    // 编辑框，包括标标签、预览icon
    .vedit {
      // 编辑框，只管驶入文本
      #veditor {
        // height: 130px;
        color: #fff;
        letter-spacing: 1px;
        &::placeholder {
          /* Chrome, Firefox, Opera, Safari 10.1+ */
          color: #eee;
          opacity: 0.4; /* Firefox */
        }

        &:-ms-input-placeholder {
          /* Internet Explorer 10-11 */
          color: #ccc;
        }

        &::-ms-input-placeholder {
          /* Microsoft Edge */
          color: #ccc;
        }
      }
      // 表情icon和预览icon所在的行
      .vrow {
        // 表情icon所在的span
        .vemoji-btn {
          fill: #fff; // svg 图片形式，无法指定颜色，所以使用滤镜
          &:hover {
            fill: @hover-color;
          }
        }
        // 预览icon所在的span
        .vpreview-btn {
          fill: #fff;
          &:hover {
            fill: @hover-color;
          }
        }
      }
    }
    // 提交按钮,md 提示icon所在行
    .vrow {
      .vicon {
        fill: #fff;
      }
      // 提交按钮
      .vsubmit {
        color: #fff;
        font-size: 1.5vh;
        font-weight: 500;
        // TODO 增加border会丧失 :hover的border
        border: 1px solid #fff;
        &:hover {
          border: 1px solid @hover-color;
          color: @hover-color;
          font-size: 1.7vh;
        }
      }
    }
    // 表情外框，内层是一大坨i标签
    .vemojis {
      max-height: 200px;
      i {
        width: 52px;
        img {
          max-width: 45px;
        }
      }
    }
    // 预览md语法的外框
    .vpreview {
      color: #fff;
      p {
        color: #fff;
        margin: 4px 0;
        padding: 1px 0;
      }
    }
  }
  // 所有评论的外框
  .vcards {
    // 单评论层，或单人评论(一层已有一个人，一层有多个人)
    .vcard {
      .vh {
        .vhead {
          .vnick {
            color: @bg8-green;
            &:hover {
              color: @hover-color;
            }
          }
        }
        // 回复按钮和时间所在的行
        .vmeta {
          // 回复的span
          .vat {
            color: inherit;
            font-size: 1.6vh;
            padding-right: 10px;
          }
        }
        // 评论内容所在的外框
        .vcontent {
          .vemoji {
            max-width: 40px; // 放大评论区的表情大小
          }
          // 当单条评论过长时，会隐藏。
          // 查看更多上面的灰阶
          &.expand::before {
            display: none;
          }
          &.expand::after {
            background: transparent;
            color: inherit;
            font-weight: 600;
            height: 2em;
            line-height: 2em;
            background: rgba(#000, 0.3);
            z-index: 100;
          }
          // 评论中普通的文字都会写在p标签中
          p {
            color: inherit;
            font-size: 0.8em;
            strong {
              font-weight: 600;
            }
            em {
              font-style: oblique;
              // font-style: italic;
              // ASK oblique、italic的区别：https://www.jianshu.com/p/3fc3e9be044c
            }
          }
          // 引用的文字，写在这个标签中
          blockquote {
            border-left: 2px solid @bg8-green;
            color: inherit;
          }
        }
      }
    }
  }
  // 当总评论数目过多，仅优先展示前多少条
  .vpage {
    .vmore {
      color: inherit;
      &:hover {
        color: @weixin-green;
        border-color: @hover-color;
      }
    }
  }
  // vanlia的版权信息，没有职业素养的可以去除
  .vpower {
    // 
    padding-right: 10px;
    // display: none;
    a {
      color: @weixin-green;
      &:hover {
        color: @hover-color;
      }
    }
  }
}
